<style scoped>
.hot_hospital .shark {
    padding: 0 30px;
}

.hot_hospital .fast {
    font-size: 20px;
    color: #f39312;
    letter-spacing: 1px;
}

.hot_hospital .main .ivu-select,
.main .ivu-input {
    border-radius: 0 2px 2px 0;
}

.hot_hospital .common-box-body {
    padding-top: 24px;
}

.hot_hospital .fixed-bottom {
    padding-left: 30px;
    padding-right: 40px;
    height: 80px;
    line-height: normal !important;
    position: fixed;
    left: 210px;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}

.hot_hospital .sidehide {
    left: 75px;
}

.hot_hospital .detail {
    margin-top: 20px;
    margin-bottom: 15px !important;
}

.hot_hospital .ivu-modal-mask .common-box-body .ivu-modal-body .ivu-form-item {
    text-align: center !important;
}
</style>
<style>
.hot_hospital
    .common-box-body
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-placeholder,
.common-box-body
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-selected-value {
    padding-right: 0px;
}

.hot_hospital .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
    color: #2d8cf0;
    border-color: transparent;
    background-color: #fff;
}

.hot_hospital .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
    color: #808080;
    border: 1px solid #dddee1;
    border-bottom: 0;
}

.hot_hospital button.ivu-btn {
    border-radius: 2px !important;
}

.hot_hospital.common-box-body .ivu-modal-body .ivu-form-item label {
    text-align: center !important;
}

.hot_hospital .ivu-select-single .ivu-select-selection {
    width: 100px !important;
    height: 34px !important;
    line-height: 34px;
}

.hot_hospital .ivu-select-selected-value {
    width: 100px;
    text-align: left;
}
</style>


<template>
    <div class="hot_hospital" id="hot_hospital">
        <product-title></product-title>
        <div class="shark" style="padding:0 30px;">
            <div class="fast">快速搜索</div>
            <div class="common-box-body">
                <Form>
                    <Row>
                        <Col :md="24" :lg="6">
                        <Form-item>
                            <Input type="text" v-model="formdata.name" placeholder="请输入定点医院名称" />
                        </Form-item>
                        </Col>

                        <Col :md="24" :lg="6">
                        <Form-item>
                            <Input type="text" v-model="formdata.address" placeholder="请输入医院地址" />
                        </Form-item>
                        </Col>

                        <Col :md="24" :lg="4" offset="8">
                        <Button size="large" class="fr" type="primary" icon="ios-search" @click="search">搜索</Button>
                        </Col>
                    </Row>
                    <div style="border-bottom:1px solid #BEBEBE;"></div>
                    <Row style="margin-top:20px;">
                        <Col :md="24" :lg="2" offset='22'>
                        <Button size="large" class="fr" type="warning" icon="plus" @click="addnewdoclist">新增</Button>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table ref="currentRowTable" @on-selection-change="checkboxChange($event)" size="large" stripe border :columns="columns1" :data="policylist" class=""></Table>
                    </div>
                </div>
            </div>
            <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="12">
                    <Button type="error" :disabled="tableaction" size="large" class="fl mr10 " @click="remove">删除</Button>
                    <!-- <Button type="info" :disabled="tableaction" size="large" class="fl mr10" @click="toDetail">编辑</Button> -->
                    </Col>
                    <Col :md="24" :lg="12" class="tRight">
                    <Page :total="totals" ref='pages' :current="currentpage" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                    </Col>
                </Row>
            </div>
        </div>

        <Modal v-model="showAddModal" :mask-closable="false" :closable="false" width="1000" :title="title" class-name="common-box-body hot_hospital" id="showAddModal">
            <Form :model="modalData" ref="modalData">
                <Row>
                    <Col :md="10" :lg="10">
                    <FormItem>
                        <Input v-model="modalData.hospital_name" placeholder="请输入医院名称"></Input>
                    </FormItem>
                    </Col>
                    <Col :md="10" :lg="10">
                    <FormItem>
                        <Input v-model="modalData.hospital_address" placeholder="请输入医院地址"></Input>
                    </FormItem>
                    </Col>

                    <Col :md="4" :lg="4">
                    <Button size="large" type="info" class="fr" icon="ios-search" @click="searchModal">搜索</Button>
                    </Col>
                </Row>
            </Form>
            <div class="">
                <Table size="large" @on-selection-change="checkboxChange2($event)" stripe border :columns="columnsModal" :data="tableListModal" class="">
                </Table>
            </div>
            <div :md="24" :lg="24" class="tRight mod_table mt15">
                <Page ref="pages5" :total="totalsModal" :page-size="pagesizeModal" show-total @on-page-size-change="pageSizeChangeModal" @on-change="pageChangeModal" placement="top" class="page"></Page>
            </div>
            <div slot="footer">
                <!-- <strong :md="24" :lg="16" class="fl"><Button style="width:60px;" type="error" :disabled="tableactionModal" size="small" @click="removeModal">删除</Button></strong> -->
                <strong :md="24" :lg="8">
                    <Button style="width:60px;" type="primary" size="small" @click="cancelModal">取消</Button>
                    <Button style="width:60px;" class="tRight" type="success" size="small" long @click="addModal">确定</Button>
                </strong>
            </div>
        </Modal>
    </div>
</template>

<script>
import productTitle from "../../components/productTitle";
import {
    get_hospital,
    add_hos_third,
    hos_third,
    del_hos_third
} from "../../api/hot_tools";
export default {
    data() {
        return {
            tableactionModal: true,
            pModal: 1, //对页面页数的定义-->初始化
            pagesizeModal: 10, //对页面的定义,出事定义10条数据
            totalsModal: 0,
            tableListModal: [],
            id: "",
            config: {
                initialFrameWidth: null,
                initialFrameHeight: 350
            },
            title: "新增展业",
            p: 1, //对页面页数的定义-->初始化
            pagesize: 10, //对页面的定义,出事定义10条数据
            totals: 0,
            showAddModal: false, //点击设置,弹出模态框
            closeable: false, //shif按ese按钮退出
            loading: true,
            tableaction: true,
            currentpage: 1,
            formdata: {
                name: "",
                address: "", //保险类型
                p: 1, //对页面页数的定义-->初始化
                pagesize: 10 //对页面的定义,出事定义10条数据
            },
            hos_ids: "",
            modalData: {
                hospital_name: "",
                hospital_address: "",
                p: 1, //对页面页数的定义-->初始化
                pagesize: 10 //对页面的定义,出事定义10条数据
            },
            hospital_ids: "",
            policylist: [],
            columns1: [
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    title: "医院名称",
                    key: "name",
                    align: "center"
                },
                {
                    title: "医院地址",
                    key: "address",
                    align: "center"
                },
                {
                    title: "医院电话",
                    key: "tel",
                    align: "center"
                }
            ],
            columnsModal: [
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    title: "医院名称",
                    key: "name",
                    align: "center"
                },
                {
                    title: "医院地址",
                    key: "address",
                    align: "center"
                },
                {
                    title: "医院电话",
                    key: "tel",
                    align: "center"
                }
            ],
            current: {}
        };
    },
    components: {
        productTitle
    },
    computed: {
        slidetoggle() {
            return this.$store.state.sildeshow;
        }
    },
    created() {},
    mounted() {
        this.getListModal();
        this.getList();
    },
    methods: {
        // 新增
        addnewdoclist() {
            this.showAddModal = true;
            this.tableaction = true;
            this.hos_ids = "";
            this.hospital_ids = "";
            this.getListModal();
        },
        cancelModal() {
            this.modalData.hospital_name = "";
            this.modalData.hospital_address = "";
            this.$refs["modalData"].resetFields();
            this.showAddModal = false;
        },
        addModal() {
            console.log(this.hospital_ids, "...this.hospital_ids");
            if (!this.hospital_ids) {
                this.$Message.error("请至少选择一条数据进行导入");
                return false;
            } else {
                var _param = {
                    hospital_ids: this.hospital_ids
                };
                console.log(_param, ".._param");
                new Promise((resolve, reject) => {
                    add_hos_third(_param)
                        .then(response => {
                            if (response.data.err == 0) {
                                this.showAddModal = false;
                                this.hospital_ids = "";
                                this.modalData.hospital_name = "";
                                this.modalData.hospital_address = "";
                                this.$refs["modalData"].resetFields();
                                this.$Message.success(response.data.info);
                                this.getList();
                            } else {
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        })
                        .catch(error => {
                            reject(error);
                        });
                });
            }
        },
        // 每页条数改变
        pageSizeChangeModal(pagesize) {
            this.pagesizeModal = pagesize;
            this.modalData.pagesize = pagesize;
            this.getListModal();
        },
        // 页码改变
        pageChangeModal(page) {
            this.pModal = page;
            this.modalData.p = page;
            this.getListModal();
        },
        searchModal() {
            this.modalData.p = 1;
            this.getListModal();
        },
        checkboxChange2(selection) {
            var str = "";
            this.hospital_ids = "";
            this.array = [];
            for (let i = 0; i < selection.length; i++) {
                this.array.push(selection[i].id);
            }
            str = this.array.join();
            this.hospital_ids = str;
        },
        // 获取列表
        getListModal() {
            new Promise((resolve, reject) => {
                get_hospital(this.modalData)
                    .then(res => {
                        if (res.data.err == 0) {
                            console.log(res, "......");
                            this.tableListModal = res.data.data.list;
                            this.totalsModal = res.data.data.total;
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },

        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize;
            this.formdata.pagesize = pagesize;
            this.tableaction = true;
            this.getList();
        },
        // 页码改变
        pageChange(page) {
            this.p = page;
            this.formdata.p = page;
             this.tableaction = true;
            this.getList();
        },
        search() {
            this.formdata.p = 1;
            this.getListl();
        },
        checkboxChange(selection) {
            this.tableaction = false;
            this.hos_ids = "";
            var str = "";
            this.array = [];
            if (selection.length > 0) {
                for (let i = 0; i < selection.length; i++) {
                    this.array.push(selection[i].id);
                }
                str = this.array.join();
                this.hos_ids = str;
            } else {
                this.tableaction = true;
            }
        },
        // 获取列表
        getList() {
            new Promise((resolve, reject) => {
                hos_third(this.formdata)
                    .then(res => {
                        if (res.data.err == 0) {
                            this.policylist = res.data.data.list;
                            console.log(this.policylist, "..this.policylist");
                            this.totals = res.data.data.total;
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        remove() {
            this.$Modal.confirm({
                title: "提示",
                content: "是否要删除该条记录?",
                onOk: () => {
                    let par = {
                        hos_ids: this.hos_ids
                    };
                    new Promise((resolve, reject) => {
                        del_hos_third(par)
                            .then(res => {
                                if (res.data.err == 0) {
                                    this.hos_ids = "";
                                    this.$Message.success(res.data.info);
                                    this.p = 1;
                                    this.formdata.p = 1;
                                    this.getList();
                                    this.tableaction = true;
                                    this.$refs['pages'].currentPage = 1;
                                } else {
                                    this.$Message.error(res.data.info);
                                }
                                resolve();
                            })
                            .catch(error => {
                                reject(error);
                            });
                    });
                }
            });
        },
        search() {
            this.tableaction = true;
            this.p = 1;
            this.formdata.p = 1;
            this.getList();
        }
    }
};
</script>